<template>
    <div>

        <div class="container">
            <div class="nav">
                <div>
                    <a href="javascript:;" @click="$router.back()"></a>
                </div>
                <div>
                    <span>汽车投诉</span>
                </div>
                <div @click="subnav = !subnav">
                    <i>&nbsp;&nbsp;&nbsp;&nbsp;</i>
                    <div class="subnav" v-show="subnav">
                        <router-link to="/" tag="a">首页</router-link>
                        <router-link to="/news" tag="a">资讯</router-link>
                        <router-link to="/video" tag="a">视频</router-link>
                        <router-link to="/seek" tag="a">找车</router-link>
                        <router-link to="/plaint" tag="a">汽车投诉</router-link>
                    </div>
                </div>
            </div>
            <div class="banner">
                <p>维护您的合法权益 我们一直在努力！</p>
                <p>厂商直连 / 权威媒体报道 / 全程跟踪解决</p>
                <p>
                    已接收处理
                    <strong>105982</strong>
                    宗投诉
                </p>
            </div>
            <div class="tabs">
                <div><span>品牌投诉</span></div>
                <div><span>车型投诉</span></div>
            </div>
            <div class="wrapper">
        
                <div class="col">
                    <div>
                        <i>1</i>
                        <div class="img">
                            <img src="http://img.315che.com/upload/carbrandimg/b_26.png" alt="">
                        </div>
                        <p>本田</p>
                        <span><em>1127</em>宗</span>
                    </div>
                    <div>
                        <i class="tow">2</i>
                        <div class="img">
                            <img src="http://img.315che.com/upload/carbrandimg/b_13.png" alt="">
                        </div>
                        <p>长安汽车</p>
                        <span><em>1127</em>宗</span>
                    </div>
                    <div>
                        <i class="three">3</i>
                        <div class="img">
                            <img src="http://img.315che.com/upload/carbrandimg/b_36.png" alt="">
                        </div>
                        <p>吉利</p>
                        <span><em>1127</em>宗</span>
                    </div>
                    <div>
        
                        <div class="img">
                            <img src="http://img.315che.com/upload/carbrandimg/b_20.png" alt="">
                        </div>
                        <p>日产</p>
                        <span><em>1127</em>宗</span>
                    </div>
        
                </div>
                <div class="col">
                    <div>
        
                        <div class="img">
                            <img src="http://img.315che.com/upload/carbrandimg/b_6.png" alt="">
                        </div>
                        <p>现代</p>
                        <span><em>1127</em>宗</span>
                    </div>
                    <div>
        
                        <div class="img">
                            <img src="http://img.315che.com/upload/carbrandimg/b_19.png" alt="">
                        </div>
                        <p>标志</p>
                        <span><em>1127</em>宗</span>
                    </div>
                    <div>
        
                        <div class="img">
                            <img src="http://img.315che.com/upload/carbrandimg/b_83.png" alt="">
                        </div>
                        <p>奥迪</p>
                        <span><em>1127</em>宗</span>
                    </div>
                    <div>
        
                        <div class="img">
                            <img src="http://img.315che.com/upload/carbrandimg/b_70.png" alt="">
                        </div>
                        <p>丰田</p>
                        <span><em>1127</em>宗</span>
                    </div>
        
                </div>
            </div>
            <div class="cross"></div>
            <div class="carhead">
                <div class="title">
                    <div><span>汽车头条</span></div>
                </div>
                <div class="content">
                    <div>
                        <div class="txt">
                            <p>“315汽车投诉” 2022年08月投诉分析报告</p>
                            <span>2022-09-06&nbsp;14:05:25</span>
                        </div>
                        <div class="img">
                            <img src="../assets/img/U3.jpg" alt="">
                        </div>
                    </div>
                    <div>
                        <div class="txt">
                            <p>“315汽车投诉” 2022年08月投诉分析报告</p>
                            <span>2022-09-06&nbsp;14:05:25</span>
                        </div>
                        <div class="img">
                            <img src="../assets/img/U3.jpg" alt="">
                        </div>
                    </div>
                    <div>
                        <div class="txt">
                            <p>“315汽车投诉” 2022年08月投诉分析报告</p>
                            <span>2022-09-06&nbsp;14:05:25</span>
                        </div>
                        <div class="img">
                            <img src="../assets/img/U3.jpg" alt="">
                        </div>
                    </div>
                    <div>
                        <div class="txt">
                            <p>“315汽车投诉” 2022年08月投诉分析报告</p>
                            <span>2022-09-06&nbsp;14:05:25</span>
                        </div>
                        <div class="img">
                            <img src="../assets/img/U3.jpg" alt="">
                        </div>
                    </div>
                    <div>
                        <div class="txt">
                            <p>“315汽车投诉” 2022年08月投诉分析报告</p>
                            <span>2022-09-06&nbsp;14:05:25</span>
                        </div>
                        <div class="img">
                            <img src="../assets/img/U3.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="area">
                加载更多
            </div>
            <div class="cross"></div>
            <div class="footer">
                <p>您的投诉建议</p>
                <p>Copyright©2019 汽车消费网 315che.com</p>
            </div>
            <div class="fled">
                <router-link to="/tosu" tag="div">我要投诉</router-link>
                <div>投诉查询</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
    created() {
        this.$emit("car-show", false);
    },
    data(){
        return{
            subnav: false
        }
    }
    }
</script>

<style lang="scss" scoped>
.nav {
    height: 44px;
    background-color: #2070e0;
    display: flex;
    align-items: center;

    &>div {
        &:nth-child(1) {
            text-align: left;
            flex: 1;
        }

        &:nth-child(2) {
            text-align: center;
            flex: 1;
        }

        &:nth-child(3) {
            text-align: right;
            flex: 1;
            position: relative;
            .subnav {
                    width: 100px;
                    height: 170px;
                    padding: 6px;
                    border-radius: 4px;
                    position: absolute;
                    top: 35px;
                    left: 12px;
                    background: rgba(0, 0, 0, 0.8);
                    z-index: 9;
            
                    a {
                        width: 100px;
                        height: 18px;
                        padding: 8px 0;
                        text-align: center;
                        background-image: none;
                        color: #fff;
                    }
            
                    &::before {
                        content: "";
                        display: block;
                        position: absolute;
                        top: -17px;
                        left: 80px;
                        border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
                        border-width: 9px;
                        border-style: dashed dashed solid dashed;
                    }
                }
        }
    }

    div {
        a {
            display: block;
            width: 40px;
            height: 40px;
            background-image: url("../assets/img/icons1.png");
            background-position: -82px -32px;
            background-size: 400px auto;
        }

        span {
            color: #fff;
            font-size: 18px;
        }

        i {
            width: 15px;
            height: 18px;
            background-image: url("../assets/img/m-icons.png");
            background-position: -211px 0px;
            background-size: 300px auto;
            margin-right: 15px;
        }
    }
}

.banner {
    height: 185px;
    background-image: url("../assets/img/tousu-banner.jpg");
    background-size: 100%;
    color: #fff;
    text-align: center;

    p {
        &:nth-child(1) {
            padding-top: 45px;
            font-size: 20px;
        }

        &:nth-child(2) {
            padding-top: 14px;
            font-size: 13px;
        }

        &:nth-child(3) {
            padding-top: 33px;
            font-size: 17px;
            font-weight: 700;
        }

        strong {
            color: #fe791d;
            font-size: 27px;
        }
    }
}

.tabs {
    height: 50px;
    margin: 0 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 15px;

    div {
        margin-right: 33px;
        color: #666;
        font-size: 16px;

        &:first-child {
            span {
                font-weight: 600;
                color: #2070e0;
                border-bottom: 2px solid #2070e0;
                padding-bottom: 13px;
            }
        }
    }
}

.wrapper {
    height: 224px;

    .col {
        display: flex;
        height: 105px;
        align-items: center;
        padding: 0 10px;
        margin-bottom: 15px;

        &:first-child {}

        div {
            height: 90px;
            position: relative;
            margin: 0 10px;
            text-align: center;
            flex: 1;

            i {
                display: block;
                background-color: #f4cf28;
                height: 15px;
                width: 15px;
                border-radius: 50%;
                font-style: normal;
                line-height: 15px;
                font-size: 12px;
                color: #fff;
                position: absolute;
                top: 5px;
                left: -4px;
            }
            .tow{
                background-color: #ccc;
            }
            .three{
                background-color: #f3c77e;
            }
        }

        .img {
            width: 50px;
            height: 50px;
        }

        p {
            color: #333;
            font-size: 12px;
        }

        span {
            font-size: 12px;
            color: #999;

            em {
                color: #fe791d;
                font-size: 12px;
                font-style: normal;
            }
        }
    }
}

.cross {
    height: 10px;
    background-color: #f5f5f5;
}

.carhead {
    margin: 0 20px;

    .title {
        height: 50px;
        border-bottom: 1px solid #f5f5f5;

        div {
            span {
                color: #2070e0;
                font-size: 16px;
                line-height: 50px;
                border-bottom: 2px solid #2070e0;
                padding-bottom: 13px;
                font-weight: 600;
            }
        }
    }

    .content {
        height: 100%；;

        &>div {
            display: flex;
            border-bottom: 1px solid #f5f7fa;
            padding: 15px 0;
        }

        .txt {
            display: flex;
            flex: 2;
            flex-direction: column;
            justify-content: space-around;
            color: #999;
            font-size: 12px;

            p {
                font-size: 18px;
                color: #333;
            }
        }

        .img {
            flex: 1;
        }
    }
}

.area {
    height: 45px;
    text-align: center;
    color: #2070e0;
    line-height: 45px;
}

.footer {
    height: 44px;
    padding: 25px 20px;
    padding-bottom: 75px;

    p {
        color: #333;
        font-size: 14px;
        text-align: center;

        &:first-of-type {
            padding-bottom: 10px;

            &::before {
                display: inline-block;
                width: 18px;
                height: 14px;
                content: "";
                background-image: url("../assets/img/m-icons.png");
                background-position: -601px 0px;
                background-size: 230px auto;
                margin-right: 3px;
            }
        }
    }
}

.fled {
    width: 100%;
    max-width: 750px;
    height: 50px;
    background-color: #367ee3;
    color: #fff;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    text-align: center;

    div {
        padding: 16px 0;
        flex: 1;

        &:first-of-type {
            &::before {
                content: "";
                display: inline-block;
                width: 15px;
                height: 15px;
                background-image: url("../assets/img/m-icons.png");
                background-position: -216px 0px;
                background-size: 230px auto;
                margin-right: 5px;
            }
        }

        &:last-of-type {
            &::before {
                content: "";
                display: inline-block;
                width: 15px;
                height: 15px;
                background-image: url("../assets/img/m-icons.png");
                background-position: -200px 0px;
                background-size: 230px auto;
                margin-right: 5px;
            }
        }
    }
}
</style>